<link rel="stylesheet" href="{$theme}css/jquery.gallery.css" type="text/css" />
<script src="/js/jquery/plugins/jquery.gallery.js" type="text/javascript"></script>
<!-- gallery doc http://www.mudaimemo.com/p/gallery/ -->


<div style='width:100%;overflow:hidden'>
<!-- images -->
{if $product.images}	
	<div id="images" class="gallery" style='float:left'>
		<ul class="galleryBar">
		
		{foreach from=$product.images item=image}		
			<li><a href="/content/images/resized/?w=400&src={$image.image_filename}"  title="{$image.image_title}"><img src="/content/images/resized/?w=55&src={$image.image_filename}" title="{$image.image_title}" /></a></li>	
		{/foreach}
	
		</ul>
	</div>
			
	{literal}
	<script type="text/javascript">$(document).ready(function()  
	{  
		$('#images').gallery({
		  slideshow:false,
		  showOverlay: false,
		  barPosition: 'bottom',
		  interval: 1000,
		  height: '380px',
		  width: '405px',
		  thumbWidth: 60,
		  toggleBar:false
		});  
	});  
	</script>
	{/literal}	
{else}		
	<div id="images" class="gallery" style='float:left;height:305px'>
		<img src='/content/images/resized/?w=400&src={$theme}images/products/no_image.jpg'/>
	</div>
{/if}


<h2>Product Info</h2>
{if $product.attributes}
<ul style='list-style:none;padding:0;color:#000000'>
	{foreach from=$product.attributes item=attribute}
	{if $attribute.product_attribute_value}<li><strong>{$attribute.attribute_name|stripslashes}</strong>: {$attribute.product_attribute_value|stripslashes}</li>{/if}
	{/foreach}
</ul>	
{/if}

{$product.product.product_description|stripslashes}

</div>
<br/>
Categories: 
{foreach from=$product.categories item=category name=cats}
	<a href='/categories/{$category.category_name|inurl}-{$category.category_id}.html'>{$category.category_name}</a> {if !$smarty.foreach.cats.last}|{/if}
{/foreach}
<br/><br/>